<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访客详情</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bossIndex.css">
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/glabe.js"></script>
    <script src="js/vue/qs.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/fontsize.js"></script>
    <style>
        .container_box{
            font-size: 0.14rem;
        }
    </style>
</head>
<body>
<div class="container_box" id="app">
    <template>
        <div class="group_details head_card_message clearfix" style="padding-right: 0.1rem;">
            <div class="fl head_card">
                <img :src="messageData.Picurl" onerror="this.src='images/moren.png'" class="spinning_img">
            </div>
            <div class="spinning_txt fl">
                <div class="fk_star">
                    <div class="lf" style="font-size:0.14rem">{{messageData.Username}}</div>
                    <div class="fk_phone">
                        <a :href="'tel:'+messageData.Phone">
                            <img style="height: .18rem;" src="images/phone.png"/>
                        </a>
                    </div>
                </div>
                <p class="fk_phone1">
                    <a :href="'tel:'+messageData.Phone"><span class="spinning_name">{{messageData.Phone}}</span></a>
                </p>
            </div>
        </div>
        <div class="tar_qh fk_content">
            <ul class="nav">
                <li :class="active == 1 ? 'selected' : '' " style="width: 46%" @click="selectActive(1)">跟进记录</li>
                <li :class="active == 2 ? 'selected' : '' " style="width: 46%" @click="selectActive(2)">详细信息</li>
            </ul>
            <div class="content">
                <div class="list" v-if="active == 1">
                    <div style="text-align: center;" @click="addVisitorGj()"><a style="font-size:0.14rem">添加访客跟进</a></div>
                    <div class="gj_Record" v-for="item in messageData.list">
                        <div class="lf progress_bar"></div>
                        <div class="gj_message">
                            <div class="gj_title">
                                <p class="lf card_title" v-if="item.Ftype == 0">电话跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 1">微信跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 2">QQ跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 3">短信跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 4">面谈跟进</p>
                                <p class="rf">跟进人：<span>{{item.Sname}}</span></p>
                            </div>
                             <ul class="card_information">
                                <li>
                                    {{item.Info}}
                                </li>
                                <li>
                                    <span>{{item.Addtime}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div  class="list" v-else>
                    <div class="line_item">
                        <span>客户类型</span>
                        <span>{{userInfo.Usertype}}</span>
                    </div>
                    <div class="line_item">
                        <span>客户姓名</span>
                        <span>{{userInfo.Username}}</span>
                    </div>
                    <div class="line_item">
                        <span>客户电话</span>
                        <span>{{userInfo.Phone}}</span>
                    </div>
                    <div class="line_item">
                        <span>客户性别</span>
                        <span v-if="userInfo.Sex == 1">男</span>
                        <span v-else-if="userInfo.Sex == 0">女</span>
                    </div>
                    <div class="line_item">
                        <span>维护人</span>
                        <span>{{userInfo.Sale}}</span>
                    </div>
                    <div class="line_item">
                        <span>客户来源</span>
                        <span>{{userInfo.Userfrom}}</span>
                    </div>
     
                    <div class="btn" @click="editVisitor()">
                        编辑
                    </div>
                </div>
            </div>
        </div> 
    </template>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            id:null,
            //
            messageData:{},
            //选项卡选中
            active:1,
            //客户信息
            userInfo:null
        },
        created() {
            //获取路由参数
            let id = getUrlQueryString('id')
            let active = getUrlQueryString('active')
            if(active){
                this.active = active
            }
            this.id = id
            //获取数据
            axios.get('mobileapi/boss/follow.php?act=follow_list&uid='+id).then(res=>{
                if(res.data.code == 200){
                    this.messageData = res.data.data
                }else{
                    vant.Toast(res.data.msg)
                }
            }).catch(err=>{
                vant.Toast('请求发送失败，请重试')
            })
            //获取客户详细信息
            axios.get(`mobileapi/boss/customer.php?act=details&uid=${id}`).then(res=>{
                if(res.data.code == 200){
                    let Usertype = res.data.data.Usertype
                    let staff = res.data.data.staff
                    let cfrom = res.data.data.cfrom
                    let userInfo = {};
                    //客户类型
                    Usertype.forEach(item => {
                        if(item.id == res.data.data.info.Usertype){
                            userInfo.Usertype = item.Utname;
                        }
                    });
                    //维护人
                    staff.forEach(item => {
                        if(item.id == res.data.data.info.Sale){
                            userInfo.Sale = item.Sname
                        }
                    });
                    //客户来源
                    cfrom.forEach(item=>{
                        if(item.id == res.data.data.info.Userfrom){
                            userInfo.Userfrom = item.Fromname
                        }
                    });
                    userInfo.Username = res.data.data.info.Username
                    userInfo.Phone = res.data.data.info.Phone
                    userInfo.Sex = res.data.data.info.Sex
                    userInfo.Level = res.data.data.info.Level
                    this.userInfo = userInfo
                }else{
                    vant.Toast(res.data.msg)
                }
            }).catch(err=>{
                vant.Toast('请求发送失败，请重试')
            })
        },
        methods: {
            //选项卡选择
            selectActive(val){
                this.active = val;
            },
            //点击跳转
            addVisitorGj(){
                location.href = `addVisitorGj.html?id=${this.id}&type=1`;
            },
            //信息编辑跳转
            editVisitor(){
                location.href = `addVisitor.html?id=${this.id}`;
            }
        },
    })
</script>
</html>